<template>
  <div id="drapDown" class="clearfix">
    <!-- <div class="drapList">
      <Dropdown trigger="click">
        <span class="el-dropdown-link">
          默认
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <DropdownMenu slot="dropdown" :style="{'left':'0px','top':'78px'}">
          <DropdownItem>默认排序</DropdownItem>
          <DropdownItem>车龄由低到高</DropdownItem>
          <DropdownItem>价格由低到高</DropdownItem>
          <DropdownItem>表显里程由低到高</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div class="drapList">
      <Dropdown trigger="click">
        <span class="el-dropdown-link">
          车牌
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </Dropdown>
    </div>
    <div class="drapList">
      <Dropdown trigger="click">
        <span class="el-dropdown-link">
          车龄
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </Dropdown>
    </div>
    <div class="drapList">
      <Dropdown trigger="click">
        <span class="el-dropdown-link">
          价格
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </Dropdown>
    </div>
    <div class="drapList">
      <Dropdown trigger="click">
        <span class="el-dropdown-link">
          筛选
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </Dropdown>
    </div> -->
  </div>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from "element-ui";
export default {
  data() {
    return {};
  },
  components: {
    Dropdown, DropdownMenu, DropdownItem
  }
};
</script>
<style type="text/css" lang='scss'>
#drapDown {
  height: 46px;
  display: flex;
  align-items: center;
  border-top:1px solid rgba(248,248,248,1);
  border-bottom:1px solid rgba(248,248,248,1);
  .drapList {
    width: 20%;
    border-right: 1px solid #f8f8f8;
    display: flex;
    justify-content: center;
    .el-dropdown {
      color: #666;
      font-size: 1.25rem;
    }
    .el-icon--right {
      margin-left: 0;
    }
    .el-dropdown-link {
      margin: 0 auto;
    }
  }
}
.el-dropdown-menu {
  width: 100%;
  left: 0;
  box-shadow: none;
  border: 0px;
  border-radius: 0;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: transparent;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: transparent;
}
</style>

